<template>
	<view class="select-company">
		<view class="form-item"><label class="form-label user-name">姓名</label>
			<uni-easyinput class="form-input" type="text" v-model="userName" :clearable="false" placeholder="请输入姓名"
				:inputBorder="false" :placeholderStyle="placeholderStyle" />
		</view>
		<view class="form-item"><label class="form-label user-company">公司</label>
			<!-- <picker class="form-input" :class="{active:index>0}" @change="bindPickerChange" :value="index"
				:range="companyList" range-key="label">
				<view class="uni-input">{{companyList[index].label}}</view>
			</picker> -->
			
			<label class="form-company" :class="{active:userCompany!=''}" @click="onCompanyClick">{{userCompany!=""?userCompany:"请选择入职的单位"}}</label>
			<image class="select-icon" src="../../static/images/icon_select@3x.png"></image>
		</view>
		<button type="default" :disabled="disabled" class="sumbit-btn" @click="onSumbitClick">申请加入</button>
		<uni-popup ref="popupCompany" type="bottom">
			<view class="popup">
				<view class="popup-header">
					<label class="cancel-btn" @click="onCancelClose">取消</label>
					<label class="popup-title">所属公司</label>
					<label class="ok-btn" @click="onOkClose">确定</label>
				</view>
				<picker-view class="picker-view" indicator-class="active" :value="index" @change="bindChange">
				    <picker-view-column class="picker-item">
				        <view class="item" :class="{active:index[0]==i}" v-for="(item,i) in companyList" :key="i">{{item.label}}</view>
				    </picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				userName: "",
				userCompany: "",
				index:[0],
				companyList: [],
				placeholderStyle: 'font-size:30rpx;color:#acacac;text-align: right;flex:1',
			}
		},
		onLoad() {
			this.getCompanyList();
		},
		methods: {
			getCompanyList: function() {
				//调接口获取公司列表
				for (var i = 0; i <= 10; i++) {
					this.companyList.push({
						id: i,
						label: "这是一家公司" + i
					})
				}
			},
			onSumbitClick(){
				//调接口 申请加入
				uni.switchTab({
					url:"./index"
				})
			},
			onCompanyClick:function(){
				this.$refs.popupCompany.open();
			},
			onOkClose:function(){
				this.userCompany = this.companyList[this.index[0]].label;
				this.$refs.popupCompany.close();
			},
			bindChange: function(e) {
				this.index = e.detail.value
			}
		}
	}
</script>

<style>
	page {
		height: calc(100% - 20rpx);
	}
	.popup-header{
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
	}
	.popup-title{
		font-size: 34rpx;
		color:#343434;
		flex: 1;
		margin-bottom: 0;
	}
	.popup-header .ok-btn{
		font-size: 30rpx;
		color: #2050F5;
	}
	.popup-header .cancel-btn{
		font-size: 30rpx;
		color: #ACACAC;
	}
	.picker-view {
        height: 600rpx;
    }
	.picker-view .active{
		height: 62rpx;
		/* background-color: #F4F4F4; */
	}
    .item {
		color: #888888;
		font-size: 26rpx;
		line-height: 62rpx;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
	.item.active{
		color: #000;
		font-size: 30rpx;
		background-color:#F4F4F4;
		border-radius: 30rpx;
	}
	.select-company {
		background-color: #F4F4F4;
		margin-top: 20rpx;
		height: 100%;
	}

	.form-item {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		height: 86rpx;
		padding: 0 32rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.form-label {
		font-size: 30rpx;
		color: #7B7B7B;
		padding-left: 44rpx;
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 32rpx;
	}

	.user-name {
		background-image: url(../../static/images/icon_company@3x.png);
	}

	.user-company {
		background-image: url(../../static/images/icon_company@3x.png);
	}

	.form-input {
		flex: 1;
		margin-right: 10rpx;
		font-size: 30rpx;
		color: #181818;

	}

	.form-input input {
		text-align: right;
	}

	.select-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.form-company {
		font-size: 30rpx;
		color: #acacac;
		text-align: right;
		flex: 1
	}

	.form-company.active {
		font-size: 30rpx;
		color: #181818;
	}
	.sumbit-btn {
		position: fixed;
		bottom: 98rpx;
	}
</style>
